<!-- 月计划达成 -->
<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <div class="flex mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="width: 100%">
        <Table
          :outTableHeight="10"
          :summaryData="summaryData"
          summary
          :tableHeader="tableHeader"
          :tableData="tableData"
          class="mt10"
          :isLoading="isLoading"
          @currentRow="currentRow"
        />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { onMounted, ref } from 'vue'
import { watch } from 'vue'
import { debounce } from 'lodash'
import service from '@/utils/request'
import LoginWork from '@/utils/LoginWork'
import JMessage from '@/utils/JMessage'
export default {
  name: 'DayPlanAchieved'
}
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const getCurrentTime = () => {
  const date = new Date()
  const year = String(date.getFullYear())
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const dayOfMonth = String(date.getDate()).padStart(2, '0')

  return `${year}-${month}-${dayOfMonth}`
}
const formList = ref([
  {
    type: 'dateSingle',
    dateLabel: '计划日期',
    placeholder: getCurrentTime(),
    dateValue: getCurrentTime()
  },
  {
    type: 'button',
    checkboxLabel: '查询'
  },
  {
    type: 'button',
    checkboxLabel: '置空'
  }
  // {
  //   type: 'button',
  //   checkboxLabel: '导出'
  // }
])

// 表一模块
// 表一按钮
const findClicked = (content: string) => {
  if (content === '查询') {
    getTableList()
  }
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
}
const tableHeader = ref([
  {
    label: '品牌',
    prop: 'brand'
  },
  {
    label: '样品类型  ',
    prop: 'sampleType'
  },
  {
    label: '计划数量',
    prop: 'planQty'
  },
  {
    label: '实际完成数量',
    prop: 'totalProd'
  },
  {
    label: '按计划完成数量',
    prop: 'schProd'
  },
  {
    label: '计划达成率',
    prop: 'rate'
  }
])
const tableData = ref([])
const isLoading = ref(true)
// 总计
interface summaryDataType {
  index: number
  num: number | string
}
const summaryData = ref<summaryDataType[]>([
  {
    index: 2,
    num: 0
  },
  {
    index: 3,
    num: 0
  },
  {
    index: 4,
    num: 0
  },
  {
    index: 5,
    num: '0%'
  }
])
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}

// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>(
    `/statements/getCompletedByMonth?startDate=${
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '计划日期')
        ?.dateValue
    }&endDate=${
      formList.value.find((item: any) => item.dateLabel && Jzhcn.Find[item.dateLabel.split('.')[1] as keyof typeof Jzhcn.Find] === '计划日期')
        ?.dateValue
    }`
  )
  isLoading.value = false
  currentRow()

  summaryData.value[0].num = tableDataList.reduce((acc: number, curr: any) => {
    acc += curr.planQty
    return acc
  }, 0)
  summaryData.value[1].num = tableDataList.reduce((acc: number, curr: any) => {
    acc += curr.totalProd
    return acc
  }, 0)
  summaryData.value[2].num = tableDataList.reduce((acc: number, curr: any) => {
    acc += curr.schProd
    return acc
  }, 0)

  summaryData.value[3].num =
    tableDataList.reduce((acc: number, curr: any) => {
      acc += curr.rate
      return acc
    }, 0) *
      100 +
    '%'

  tableData.value = tableDataList.map((item: any) => {
    return {
      ...item,
      rate: item.rate * 100 + '%'
    }
  })
}, 500)
onMounted(() => {
  getTableList()
})

// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0]) => {
  currentTableRow.value = row
}
</script>
